import { FC } from "react";

// 引入资源
import styles from './styles.module.scss'
import { HeartOutlined, EyeOutlined, MessageOutlined, RightOutlined } from '@ant-design/icons';
import { Statistic, } from 'antd';

// 引入类型
import { SpecialGoods } from "../../api/Special/type";


interface Props {
    SpecialGoods: SpecialGoods[]
}

const Special: FC<Props> = (props) => {

    const { SpecialGoods } = props

    return (
        <div className={styles.container}>
            <div className={styles.Special}>
                <div className={styles.title}>
                    <span>最新专题</span>
                    <label>查看全部<RightOutlined style={{ fontSize: 18 }} /></label>
                </div>
                <div className={styles.content}>
                    {
                        SpecialGoods.map((item) => {
                            return (
                                <div className={styles.box} key={item.id}>
                                    <img src={item.detailsUrl} alt="" />
                                    <div className={styles.desc}>
                                        <div>
                                            <span>{item.title}</span>
                                            <span>{item.summary}</span>
                                        </div>
                                        <label >
                                            <span>￥{item.lowestPrice}起</span>
                                        </label>
                                    </div>
                                    <div className={styles.detail}>
                                        <Statistic value={item.collectNum} prefix={<HeartOutlined />} style={{ position: "absolute", left: 0 }} />
                                        <Statistic value={item.viewNum} prefix={<EyeOutlined />} style={{ position: "absolute", left: 90 }} />
                                        <Statistic value={item.replyNum} prefix={<MessageOutlined />} style={{ position: "absolute", right: 0 }} />
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        </div>
    )
}

export default Special